<template>
  <!-- 委托列表 -->
  <div>
    <!--        <div class="flex justify-between" v-if="listData.length">-->
    <!--            <div class="flex" @click.stop="changeIcon">-->
    <!--                <img v-show="!iconShow" src="../../assets/image/public/grey-rounded.png" alt="" class="w-38 h-38"/>-->
    <!--                <img v-show="iconShow" src="../../assets/image/public/blue-rounded.png" alt="" class="w-38 h-38"/>-->
    <!--                <div class="ml-37">{{ $t('隐藏其它合约') }}</div>-->
    <!--            </div>-->
    <!--            <button class="border-none all-cancel-btn pl-34 pr-34 pt-10 pb-10 font-25" @click="recallAll">{{ $t('全部撤销') }}</button>-->
    <!--        </div>-->
    <template v-if="listData.length > 0">
      <div class="border-b-color" v-for="item in listData" :key="item.order_no">
        <div class="flex justify-between items-center pt-34 pb-19">
          <div class="flex flex-col">
            <div class="flex items-center">
              <div class="font-31 w-100 buy-title" :class="item.direction == 'buy' ? ' text-green' : 'text-red'">
                {{ handleWord(item.direction, item.offset, item.order_price_type) }}
              </div>
              <div class="ml-20 font-31 font-600 textColor">{{ item.name }}</div>
            </div>
          </div>
          <div class="text-grey font-26 flex flex-col justify-between">
            {{ item.create_time }}
          </div>
        </div>
        <div class="flex justify-between pb-34">
          <div class="flex items-center flex-between">
            <div class="w-100">
              <van-circle v-model="currentRate" :rate="(1 - item.volume / item.volume_open * 100)" :speed="100"
                :text="text" :layer-color="'#EAEBEF'" :stroke-width="60" :size="'65px'" />
            </div>
            <div class="ml-62">
              <div class="flex  items-center">
                <div class="text-grey">
                  <div>{{ $t('数量') }}</div>
                  <!-- <di(USDT)v></div> -->
                </div>
                <div class="ml-25 font-26 textColor">{{ item.volume_open - item.volume }}/{{ item.volume_open }}</div>
              </div>
              <div class="flex mt-35 items-center">
                <div class="text-grey">{{ $t('价格') }}</div>
                <div class="ml-25 font-26 textColor">{{ item.price }}</div>
              </div>
            </div>
          </div>
          <div class="btn-wrap mt-75">
            <button class="order-btn colorMain borderMain bg-white" @click.stop="goDetail(item)">
              {{ $t('详情') }}</button>
            <button class="ml-19 order-btn border-none greyBg" @click.stop="cancelSingle(item.order_no)">
              {{ $t('撤单') }}</button>
          </div>
        </div>
      </div>
    </template>
<!--    <div class="text-grey text-center py-300" v-if="!listData.length">{{ $t('还没有委托') }}</div>-->
  </div>
</template>

<script>
import { Circle } from "vant";
import { _recallOrder, _recallOrderBatch } from "@/API/trade.api";
export default {
  name: "perpetualEntrustList",
  components: {
    [Circle.name]: Circle
  },
  props: {
    listData: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      currentRate: 0,
      //委托列表
      //    entrustData:[
      //     { name:"BTC/USDT",create_time:"2022-04-05 22：10：31",direction:"buy",amount:"200",price:"23000"},
      //     { name:"ETH/USDT",create_time:"2022-04-05 22：10：31",direction:"sell",amount:"30",price:"1500"},
      //    ],
      iconShow: false,
    }
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },
  mounted() {
  },
  methods: {
    handleWord(direction, offset, price_type) {
      let a = ''
      let b = ''
      if (price_type === 'limit') {
        a = this.$t('限价')
      } else {
        a = this.$t('市价')
      }
      if (direction === 'buy' && offset === 'open') {
        b = this.$t('开多')
      } else if (direction === 'sell' && offset === 'open') {
        b = this.$t('开空')
      } else if (direction === 'buy' && offset === 'close') {
        b = this.$t('平多')
      } else {
        b = this.$t('平空')
      }
      return a + '/' + b
    },
    changeIcon() {
      this.iconShow = !this.iconShow;
    },
    goDetail(item) {
      this.$router.push({
        path: "/entrustDetail?order_no=" + item.order_no
      });
    },
    cancelSingle(order_no) {//撤销单个委托单
      _recallOrder(order_no).then(() => {
        this.$toast(this.$t('撤单成功'))
        this.$emit('recall', order_no)
      })
    },
    recallAll() { // 全部撤销
      _recallOrderBatch().then(() => {
        this.$toast(this.$t('撤单成功'))
        this.$emit('recall')
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.btn-wrap {
  display: flex;
  justify-content: center;
  align-content: center;
}

.order-btn {
  font-size: 26px;
  border-radius: 6px;
  height: 53px;
  line-height: 53px;
  padding: 0 20px;
  display: flex;
  align-content: center;
  justify-content: center;

  @include themify() {
    background: themed("btn_background1");
  }

  @include themify() {
    border: themed("btn_background1");
  }

  color: #1194F7;
}

::v-deep .van-circle__text {
  color: #DAD5DC;
}

.greyBg {
  @include themify() {
    background: themed("btn_background2");
  }

  color: #818181;
}

.border-b-color {
  @include themify() {
    border-bottom: 1px solid themed("border_color") !important;
  }
}

.w-100 {
  min-width: 180px;
}

.ml-62 {
  margin-left: 20px;
}

.buy-title {
  width: 100px;
  word-wrap: break-word;
  word-break: break-all
}
</style>
